<template>
<div>
    <el-button type="info" icon="el-icon-plus" style="margin-top:10px" @click="show(1)">添加</el-button>
    <el-table :data="listData" style="margin-top:50px;"  empty-text='暂无数据'>
        <el-table-column label="序号" type="index" width="80" align='center'>
        </el-table-column>
        <el-table-column label="品牌名称" prop="tmName" >
        </el-table-column>
        <el-table-column label="品牌logo" prop='logoUrl'>
            <template slot-scope="{row}">
                <img :src="row.logoUrl" style="width:100px;height:100px">
            </template>
        </el-table-column>
        <el-table-column label="操作" prop="logoUrl">
            <template slot-scope="{row,$index}">
                <el-button type="warning" size='mini' icon="el-icon-setting" @click="show(0,row.logoUrl,row.tmName,row.id)">修改</el-button>
                <el-button type="danger" size='mini' icon="el-icon-delete" @click="delList(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
    style="text-align:center;margin-top:30px"
    :page-count="5"
    :page-sizes="[3,5,10]"
    :page-size="limit"
    :total="total"
    :background='true'
    layout="prev, pager, next, jumper,->,total, sizes"
    :current-page="page"
    @size-change='sizeChange'
    @current-change="getPagesData">
    <!-- 回传一个页面的值 -->
    </el-pagination>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :before-close="down" >
    <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="品牌名称" :label-width="formLabelWidth" style="width:60%" prop='tmName'>
        <el-input v-model="form.tmName" autocomplete="off" ></el-input>
    </el-form-item>
    <el-form-item label="品牌logo" :label-width="formLabelWidth"  prop='thisimgSrc'>
    <el-upload
        class="avatar-uploader"
        action="/dev-api/admin/product/fileUpload"
        :show-file-list="false"
        :on-success="loadeSuccess"
        >
        <img v-if="form.thisimgSrc" :src="form.thisimgSrc" class="avatar">
        <!-- <i class="el-icon-plus avatar-uploader-icon">轻点图片上传</i> -->
        <i v-else class="el-icon-plus avatar-uploader-icon" style="display:block"></i>
        <span>轻点方框上传</span>
    </el-upload>
    </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
    <el-button  @click="upDateList()">取 消</el-button>
    <el-button type="primary"  @click="upDateList" >确 定</el-button>
    </div>
</el-dialog>
</div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
    name:'tradeMake',
    data(){
        return{
            //代表分页器的第几页
            page:1,
            //当前页展示数据条数
            limit:3,
            //总数据条数
            total:0,
            //list数据
            title:'',
            listData:[''],
            dialogFormVisible:false,
            formLabelWidth:'80px',
            id:'',
            form: {
                tmName: '',
                region: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                thisimgSrc:''
            },
            //表单验证规则
            rules: {
                //品牌名称验证规则 监听el-input事件
                tmName: [
                    { required: true, message: '请输入品牌名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 3 到 5 个字符', trigger: 'change' }
                ],
                thisimgSrc: [
                    { required: true, message: '请选择品牌图片'}
                ],
            }
        }
    },
    methods: {
    async getPagesData(pager = this.page){
        const {limit} = this;
        const result = await this.$API.trademark.reqPagesData(pager,limit);
            if(result.code == 200){
                this.listData = result.data.records
                this.page = result.data.current
                this.total = result.data.total
            };
    },
    ...mapActions('tradeMark',['getTradeMarkData']),
    sizeChange(val){
        this.limit = val;
        this.getPagesData();
    },
    down(done){
        this.id = ''
        this.form.tmName=''
        this.form.thisimgSrc = ''
        done()
    },
    show(e,imgSrc,name='',id=''){
        this.title = e === 1 ? '添加品牌' : "修改品牌";
        this.id = id
        this.form.thisimgSrc = imgSrc || '';
        this.form.tmName = name;
        this.dialogFormVisible = true;
    },
    loadeSuccess(e){
        if(e.code == 200){
            this.form.thisimgSrc = e.data
        }
    },
    upDateList(){
        this.$refs.form.validate( async success=>{
            console.log(success)
            if(success){//如果验证成功
                this.dialogFormVisible = false
                    let {form,id} = this
                    let {tmName,thisimgSrc}  = form
                    let logoUrl = thisimgSrc
                    if(id){
                        await this.$API.trademark.reqUploadBrand({id,tmName,logoUrl})
                    }else{
                        await this.$API.trademark.reqUploadBrand({tmName,logoUrl})
                    }
                    this.$message({
                        message:id?'修改成功':'添加成功',
                        type:'success',
                        center:true
                })
            }else{
                return false
            }
        })
        
    }, 
    delList(row){
        let thisvue = this
        this.$confirm(`确认删除${row.tmName}吗`,{
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }).then(async(_)=>{
            const del = await thisvue.$API.trademark.reqDelBrand(row.id)
            if(del.code){
                thisvue.$message.success('删除成功')
                this.getPagesData(this.listData.length > 1?this.page:this.page - 1)
            }else{
                this.$message.error('数据请求错误')
            }
        }).catch(_=>{
            this.$message.info('成功取消删除')
        })
    }
    },
    mounted() {
        this.getPagesData()
        
    },

}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>